@import "variables";

.tactical-info {
  border-top: pxTorem(20) solid color($h5, c9);
  .tactical-info-det {
    padding: 0 pxTorem(26) pxTorem(30) pxTorem(26);
    li {
      margin-top: pxTorem(30);
      display: flex;
      .info-key {
        display: inline-block;
        font-size: standard($h5, f3);
        color: color(c4);
        width: pxTorem(208);
      }
      .info-value {
        @include over-ellipsis();
        flex: 1;
        font-size: standard($h5, f3);
        color: color(c2);
      }
      &:first-child {
        margin-top: 0;
      }
    }

  }
}

.tactical-title {
  position: relative;
  height: pxTorem(88);
  font-size: standard($h5, f3);
  color: color(c2);
  padding-left: pxTorem(26);
  display: flex;
  align-items: center;
  justify-content: space-between;
  &:after {
    position: absolute;
    left: 0;
    top: pxTorem(30);
    content: '';
    width: pxTorem(6);
    height: pxTorem(28);
    background: color($h5, c1);
  }
}

.tactical-detail {
  border-top: pxTorem(20) solid color($h5, c9);
  .tactical-box {
    position: relative;
    padding: pxTorem(30) 0;
    display: flex;
    display: -webkit-flex;
    justify-content: space-around;
    align-items: center;
    .tactical-canvas {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #play {
      display: block;
      width: pxTorem(112);
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    }
    #rePlay{
      width: pxTorem(112);
      height: pxTorem(112);
      text-align: center;
      line-height: pxTorem(112);
      border-radius: 100%;
      background: rgba(0, 0, 0, 0.4);
      color: color($h5, c10);
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    }
    #suspended {
      position: absolute;
      width: pxTorem(112);
    }
    .previous {
      width: pxTorem(60);
      height: pxTorem(60);
      background: url(#{$icons-path}/tactics_on_nor.png) no-repeat center/contain;
      &.end{
        background: url(#{$icons-path}/tactics_on_dis.png) no-repeat center/contain;
      }
    }
    .next {
      width: pxTorem(60);
      height: pxTorem(60);
      background: url(#{$icons-path}/tactics_under_nor.png) no-repeat center/contain;
      &.end{
        background: url(#{$icons-path}/tactics_under_dis.png) no-repeat center/contain;
      }
    }
  }
}

.tactical-des {
  border-top: pxTorem(20) solid color($h5, c9);
  .tactical-des-text {
    padding: pxTorem(30) pxTorem(26);
  }
}
